<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #canvas {
        height: 500px;
        width: 500px;
        background-color: #eeeeee;
    }
</style>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d'); //绘画环境
    // ctx.translate(0.5,0.5) 可以解决一像素问题，translate(x,y)把坐标原点移动到x,y的位置
    let grad1 = ctx.createLinearCradient(20, 20, 20, 300); //(x1,y1,x2,y2)x1,y1起始坐标 x2,y2终点坐标
</script>

</html>